<template>
	<view class="box">
		<view class="list">
			<view class="card flex" v-for="(item,index) of list" :key="index">
				<view class="left">
					<view class="price">￥<text class="f40">{{item.price1}}</text></view>
					<view class="tj">满{{item.price2}}可用</view>
				</view>
				<view class="right">
					<view class="one">{{item.name}}</view>
					<view class="two">{{item.time}}</view>
					<view class="three flex" @click="zhankai(index)">
						<view>
							<view class="desc" :class="!item.look?'hide-line':''">{{item.desc}}</view>
						</view>
						<view class="icon" v-if="item.desc.length>19">
							<image src="https://jw.xzsw2021.com/static/img/icon_62@2x.png" mode="" v-if="!item.look"></image>
							<image src="https://jw.xzsw2021.com/static/img/icon_63@2x.png" mode="" v-else></image>
						</view>
					</view>
					<!-- 立即领取 -->
					<view class="lingqu" @click="lingqu(item.id)" v-if="!item.isGet">
						立即领取
					</view>
					<view class="lingqu get" @click="lingqu" v-else>
						已领取
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[
					{
						id:1,
						price1:40,
						price2:69,
						name:'佳慧菜市场弹子石店通用券',
						time:'2021.11.17-2021.11.20',
						isGet:false,
						desc:'商家发放，仅限部分商品使用；部分门店使 用； 可与店内不同形式的促销商品同享；',
						look:false
					},
					{
						id:2,
						price1:100,
						price2:150,
						name:'佳慧菜市场弹子石店通用券',
						time:'2021.11.17-2021.11.20',
						isGet:true,
						desc:'商家发放，仅限部分商品使用仅限部分商品使用',
						look:false
					},
				],
				type:0,//
			}
		},
		onLoad(options) {
			if(options.type==2){
				this.type=2;
				uni.setNavigationBarTitle({
					title:'我的红包'
				})
			}
		},
		methods: {
			// 展开
			zhankai(index){
				this.list[index].look=!this.list[index].look;
			},
			//领取
			lingqu(id){
				
			}
		}
	}
</script>
<style>
	page{
		background: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.box{
		padding: 0 20rpx;
		.list{
			padding: 0 0 20rpx;
			.card{
				margin-top: 20rpx;
				width: 710rpx;
				// height: 186rpx;
				padding: 23rpx 28rpx 23rpx 0;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;
				.left{
					
					flex-shrink: 0;
					width: 160rpx;
					height: 160rpx;
					border-right: 1rpx dashed #CCCCCC;
					text-align: center;
					color: #F83535;
					.price{
						margin-top: 28rpx;
					}
					.tj{
						margin-top: 6rpx;
						font-size: 24rpx;
						color: #666;
					}
				}
				.right{
					position: relative;
					flex: 1;
					margin-left: 30rpx;
					font-size: 28rpx;
					.two{
						margin: 28rpx 0;
						color: #666;
					}
					.three{
						color: #999;
						font-size: 24rpx;
						overflow: hidden;
						
						.desc{
							flex: 1;
							width: 450rpx;
						}
						.icon{
							flex-shrink: 0;
							margin-left: 20rpx;
							width: 26rpx;
							height: 14rpx;
							image{
								width: 100%;
								height: 100%;
							}
							
						}
					}
					.lingqu{
						position: absolute;
						right: 0;
						top: 60rpx;
						width: 130rpx;
						height: 44rpx;
						line-height: 44rpx;
						text-align: center;
						background: #FFFFFF;
						border: 1rpx solid #F83535;
						border-radius: 22rpx;
						font-size: 26rpx;
						color: #F83535;
					}
					.get{
						border: 1rpx solid #ccc;
						color: #666;
					}
				}
			}
		}
	}
</style>
